<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_baoguoappointment.make_door') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 120rpx;'">
			<view class="baoguo_center">
				<view class="my_querendb_item1">
					<view class="my_querendb_item1_dis" v-if="arrlistquanbu.length == 0" @tap="selectAddress()">
						<view class="my_querendb_item1_l">
							<image :src="imgUrl + '/dzx_img164.png'"></image>
							<text>{{ $t('page_baoguoappointment.add_address') }}</text>
						</view>

						<view class="my_querendb_item1_r"><image :src="imgUrl + '/dzx_img165.png'"></image></view>
					</view>
					<view class="my_querendb_item1_dis" v-if="arrlistquanbu.length != 0">
							<image :src="imgUrl + '/dzx_img164.png'"></image>
							<view class="my_querendb_item1_ltxt">
								<view class="my_querendb_item1_lt1">{{ arrlist.name }} {{ arrlist.phone }}</view>
								<view class="my_querendb_item1_lt2">
									{{ arrlist.country }}{{ arrlist.province }}{{ arrlist.city }}{{ arrlist.district }}{{ arrlist.detail }} {{ arrlist.door }}
								</view>
							</view>
						</view>

						<view class="my_querendb_item1_r">
							<text @tap="selectAddress()">{{ $t('page_baoguoappointment.change_address') }}</text>
						</view>
					</view>
					<view class="my_querendb_item1_img"><image :src="imgUrl + '/dzx_img46.png'"></image></view>
				</view>
				<view class="baoguo_item2">
					<view class="baoguo_item2_cont" @tap="guojiatz">
						<view class="baoguo_item2_cont_l">
							<image :src="imgUrl + '/dzx_img23.png'"></image>
							<text>{{ $t('page_baoguoappointment.send_country') }}</text>
						</view>
						<view class="baoguo_item2_cont_r">
							<text>{{ guojianame }}</text>
							<image :src="imgUrl + '/dzx_img25.png'"></image>
						</view>
					</view>
					<view class="baoguo_item2_cont">
						<view class="baoguo_item2_cont_l">
							<image :src="imgUrl + '/dzx_img24.png'"></image>
							<text>{{ $t('page_baoguoappointment.bulk_warehouse') }}</text>
						</view>
						<picker @change="bindPickerChange" :value="index" :range="cangkuarray">
							<view class="baoguo_item2_cont_r">
								<text>{{ cangkuarray[index] }}</text>
								<image :src="imgUrl + '/dzx_img25.png'"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="baoguo_item2">
					<view class="baoguo_item2_cont" @tap="shangpinpinlei">
						<view class="baoguo_item2_cont_l">
							<image :src="imgUrl + '/dzx_img28.png'"></image>
							<text>{{ $t('page_baoguoappointment.item_category') }}</text>
						</view>
						<view class="baoguo_item2_cont_r">
							<text>{{ shangpinnames }}</text>
							<image :src="imgUrl + '/dzx_img25.png'"></image>
						</view>
					</view>
					<view class="baoguo_item2_cont">
						<view class="baoguo_item2_cont_l">
							<image :src="imgUrl + '/dzx_img29.png'"></image>
							<text>{{ $t('page_baoguoappointment.item_value') }}({{ price_mode.unit }})</text>
						</view>
						<view class="baoguo_item2_cont_r"><input type="digit" @input="wupinjiazhiFun" :placeholder="$t('page_baoguoappointment.please_enter_item_value')" /></view>
					</view>
					<view class="baoguo_item2_cont2">
						<view class="baoguo_item2_cont_l">
							<image :src="imgUrl + '/dzx_img30.png'"></image>
							<text>{{ $t('page_baoguoappointment.commodity_remarks') }}</text>
						</view>
						<view class="baoguo_item2_cont_txt">
							<textarea @input="shangpinbeizhuFun" :placeholder="$t('page_baoguoappointment.please_enter_note')" name="" id="" cols="30" rows="10"></textarea>
						</view>
					</view>
					<view class="cangkuyuan_saomaruku_item1_cont2" style="border-bottom: none">
						<view class="cangkuyuan_saomaruku_item1_cont_l">
							<image :src="imgUrl + '/dzx_img192.png'"></image>
							<text>{{ $t('page_baoguoappointment.photo_upload') }}</text>
						</view>
						<view class="cangkuyuan_saomaruku_item2_r5" @click="toSelectImage()">
							<view v-for="item in imageSrc" :key="index" class="cangkuyuan_saomaruku_item2_r5_img"><image :src="item"></image></view>
							<view class="cangkuyuan_saomaruku_item2_r5_img"><image :src="imgUrl + '/dzx_img193.png'"></image></view>
						</view>
					</view>
				</view>

				<view class="baoguo_item3" @tap="btnisshow">
					<image :src="imgUrl + (isshow ? 'dzx_img31.png' : 'dzx_img32.png')"></image>
					<view class="baoguo_item3_txt">{{ $t('page_baoguoappointment.viewed_and_agreed') }}</view>
					<view class="baoguo_item3_txt1" @tap="guizeshows">《{{ guizes.article_title }}》</view>
				</view>
				<view class="baoguo_btns">
					<view class="baoguo_btns_posi">
						<view class="baoguo_btn" @tap="tijiao">{{ $t('page_baoguoappointment.submit_forecast') }}</view>
					</view>
				</view>
			</view>

			<view class="baoguo_guize" v-if="guizeshow">
				<view class="baoguo_guize_banner">
					<view class="baoguo_guize_title">《{{ guizes.article_title }}》</view>
					<rich-text :nodes="article_content"></rich-text>
					<view class="baoguo_guize_btns" @tap="isguizeshows">
						<view class="baoguo_guize_btns_txt">{{ $t('page_baoguoappointment.ISee') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			isshow: false,
			guojiaid: '',
			guojianame:this.$t('page_other.选择国家'),
			price_mode: uni.getStorageSync('price_mode'),
			cangkuarray: [],
			index: 0,
			kuaidirray: [],
			indexkd: 0,
			shangpinids: '',
			shangpinnames:this.$t('page_other.请选择商品品类'),
			guizeshow: false,
			kuaididanhao: '',
			kuaididan: '',
			duokuaididan: '',
			wupinjiazhi: '',
			shangpinbeizhu: '',
			address_id: 0,
			guizes: {
				article_title: ''
			},
			article_content: '',
			kuaidilist: '',
			arrlist: [],
			arrlistquanbu: [],
			cangkuarr: '',
			template_ids: '',
			imageSrc: [],
			imageIds: []
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad() {
		var that = this;
		this.dizhilist();
	},
	onShow() {
		var that = this;
		that.getSubTemplate();
		that.cangkulist();
		that.guize(); //返回国家id
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		that.guojiaid = currPage.guojiaid || ''
		that.guojianame = currPage.guojianame || ''
		if (currPage.ids) {
			this.shangpinids = currPage.ids
			this.shangpinnames = currPage.names
		}
		if (currPage.address_id) {
			this.address_id = currPage.address_id;
			this.dizhilist();
		}
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		toSelectImage() {
			var that = this;
			uni.chooseImage({
				count: 9, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: function(res) {
					//判断图片格式
					uni.showLoading({
						title:'......'
					})
					console.log(res)
					for(var i=0;i<res.tempFiles.length;i++){
						if(res.tempFiles[0]['size']>2*1024*1024){
							uni.showToast({
								title: that.$t('page_other.图片大小不能超过2M'),
								icon: 'none',
								duration: 3000
							});
							return;
						}
						
						that.uploadImgFile(res.tempFiles[0],that)
					}
				}
			});
		},
		uploadImgFile(filePath) {
			var that = this;
			uni.uploadFile({
				url:app.globalData['url']+"/index.php?s=/api/upload/image&wxapp_id="+ uni.getStorageSync('web_id')+"&token="+uni.getStorageSync('token'),
				filePath: filePath.path,
				name: 'iFile',
				success: response => {
					let res = JSON.parse(response.data);
					uni.hideLoading();
					if (res.code == 1) {
						that.imageSrc.push(res.data.file_path);
						that.imageIds.push(res.data.file_id);
					}
					console.log(that.imageSrc, '--666--res');
				},
				fail: err => {
					uni.hideLoading();
					console.log('请求失败_______________', err);
				}
			});
		},
		//验货规则
		guize() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/article/report_note&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var article_content = res.data.data.detail.article_content;
					article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
					that.guizes = res.data.data.detail
					that.article_content = article_content
				}
			});
		},
		selectAddress() {
			uni.navigateTo({
				url: '/pages/pintuans/dizhi/dizhi?type=xuanze'
			});
		},
		//地址列表
		dizhilist() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/address/lists&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(this.address_id, 'addid');
					if (that.address_id != '') {
						var items = {};
						for (var i = 0; i < res.data.data.list.length; i++) {
							if (that.address_id == res.data.data.list[i].address_id) {
								items = res.data.data.list[i];
							}
						}
						that.arrlist = items
						that.arrlistquanbu = res.data.data.list
					} else {
						that.arrlist = res.data.data.list[0]
						that.address_id = res.data.data.list[0]['address_id']
						that.arrlistquanbu = res.data.data.list
					}
				}
			});
		},
		getStorageIndex(modelid) {
			var storagelist = this.cangkuarr;
			for (var l in storagelist) {
				if (storagelist[l]['shop_id'] == modelid) {
					return l;
				}
			}
			return false;
		},

		//商品备注
		shangpinbeizhuFun(e) {
			this.shangpinbeizhu = e.detail.value
		},

		//物品价值
		wupinjiazhiFun(e) {
			this.wupinjiazhi = e.detail.value
		},
		//清空快递单号
		clearkuaididanhao() {
			this.kuaididanhao = ''
		},

		//提交
		tijiao() {
			var that = this;
			var data = {
				country_id: that.guojiaid,
				//国家id
				storage_id: that.cangkuarr[that.index].shop_id,
				//仓库id
				class_ids: that.shangpinids,
				//物品品类
				price: that.wupinjiazhi,
				//物品价值
				remark: that.shangpinbeizhu,
				//地址
				address_id: that.address_id,
				//图片
				imageIds: that.imageIds,
				//商品备注
				token: uni.getStorageSync('token') //token用户登录凭证
			};
			if (that.address_id == 0) {
				uni.showToast({
					title: that.$t('page_other.请先填写地址'),
					icon: 'none'
				});
				return;
			}
			if (that.isshow) {
				if (data.country_id == '') {
					uni.showToast({
						title: that.$t('page_other.选择国家'),
						icon: 'none'
					});
				} else {
					if (data.prices == '') {
						uni.showToast({
							title: that.$t('page_other.物品价值不可为空'),
							icon: 'none'
						});
					} else {
						request.post(`index.php?s=/api/package/appreport&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
							if (res.data.code == 1) {
								uni.requestSubscribeMessage({
									tmplIds: that.template_ids,
									//需要订阅的消息模板的id的集合，一次调用最多可订阅3条消息
									// 消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置

									success(res1) {
										that.clearkuaididanhao();
										// 接口调用成功的回调函数
										uni.showToast({
											title: res.data.data,
											icon: 'success'
										});
										if (
											res[that.template_ids] == 'accept' // Object res   [TEMPLATE_ID]是动态的键，即模板id，值包括'accept'、'reject'、'ban'。
											// 'accept'表示用户同意订阅该条id对应的模板消息，'reject'表示用户拒绝订阅该条id对应的模板消息，'ban'表示已被后台封禁。
										) {
											if (that.subscribeMes) {
												uni.showToast({
													title: that.$t('page_other.订阅成功！'),
													duration: 1500,
													icon: 'success',

													success(data) {
														that.subscribeMes = false;
													}
												});
											}

											uni.navigateTo({
												url: '/pages/indexs/dairuku/dairuku'
											});
										} else {
											uni.navigateTo({
												url: '/pages/indexs/dairuku/dairuku'
											});
										}
									},

									fail(res) {
										console.log(res);
										// 接口调用失败的回调函数
										if (res.errCode === 20004) {
											uni.showModal({
												title: that.$t('page_other.温馨提示'),
												content:that.$t('page_other.您已拒绝授权'),
												showCancel: false,
												success: res => {
													if (res.confirm) {
														uni.navigateTo({
															url: '/pages/indexs/dairuku/dairuku'
														});
													}
												}
											});
										}
									}
								});
								uni.showToast({
									title: res.data.data,
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 0
									});
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					}
				}
			} else {
				uni.showToast({
					title: that.$t('page_other.请先查看并勾选规则'),
					icon: 'none'
				});
			}
		},

		isguizeshows() {
			this.guizeshow = false
		},

		guizeshows() {
			this.guizeshow = true
		},

		//品类
		shangpinpinlei() {
			uni.navigateTo({
				url: '/pages/indexs/shangpinpinlei/shangpinpinlei'
			});
		},

		//选择国家
		guojiatz() {
			uni.navigateTo({
				url: '/pages/indexs/baoguoyg_guojia/baoguoyg_guojia'
			});
		},

		//仓库列表
		cangkulist() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.get(`index.php?s=/api/package/storage&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var arrlist = [];
					for (var i = 0; i < res.data.data.length; i++) {
						arrlist.push(res.data.data[i].shop_name);
					}
					this.cangkuarray = arrlist
					this.cangkuarr = res.data.data
				}
			});
		},

		getSubTemplate: function() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.get(`index.php?s=/api/package/SubTempate&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					this.template_ids = res.data.data.template_ids
					console.log(this.template_ids);
				}
			});
		},

		//选择仓库
		bindPickerChange: function(e) {
			this.index = e.detail.value
		},

		btnisshow() {
			this.isshow = !this.isshow
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './baoguoyg.css';
</style>
